<template>

  <el-scrollbar>

    <p class="index-title">最新视频</p>

    <div style="margin: 16px 16px;display: flex;flex-direction: row;flex-wrap: wrap;">
      <div class="common-video-container" v-for="video in videoList">
        <VideoBox :video_id="video.uuid" :video_author="video.username" :video_time="video.time" :video_title="video.title"/>
      </div>
    </div>

<!--    <p class="index-title">热门视频</p>-->

<!--    <div style="margin: 16px 16px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around">-->
<!--      <div class="common-video-container" v-for="i in 10">-->
<!--        <VideoBox video_img="https://i2.hdslb.com/bfs/archive/6876bcfa2fb95d93717a95381ac6f374cbaa0283.jpg@320w_200h_1c_!web-space-index-myvideo.webp"-->
<!--                  video_id="345" video_author="嘉然今天吃什么" video_time="11-5" video_title="视频简介"/>-->
<!--      </div>-->
<!--    </div>-->

  </el-scrollbar>

</template>

<script setup>
import VideoBox from "../../components/common/VideoBox.vue";
import {useUserInfoStore} from "../../store/UserInfoStore";
import {onMounted, ref} from "vue";
import {postRequest} from "../../util/requestUtil";
import {GET_LAST_VIDEO_LIST_API} from "../../api/video";

const userInfoStore = useUserInfoStore();

const videoList = ref([]);

onMounted(()=>{
  postRequest(GET_LAST_VIDEO_LIST_API, void 0, (data)=>{
    videoList.value = data.videos
  }, ()=>{}, ()=>{}, false);
});

</script>

<style scoped>
.index-title{
  font-size: 30px;
  text-align: center;
  color: #18191C;
}

</style>